<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="icon" href="data:;base64,=">
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
    </style>
</head>
<body>
<div id="app">
    <el-container >
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu>
                <!--            遍历页面的departments元素-->
                <el-submenu :index="department.id" v-for="department in departments">
                    <template slot="title">
                        {{department.name}}</template>
                    <el-menu-item-group>
                        <!--                    遍历每个departments元素中的下级subdepartment元素-->
                        <el-menu-item  v-for="cDepartment in department.subTDepartment">
                            <el-button  @click="functionEdit(cDepartment.id)" >{{cDepartment.name}}</el-button>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <!--        右侧列表-->
            <el-main>
                <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true" >新增下级部门</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="deleteCategories()" >删除该部门</el-button>
                <el-form :model="department" size="mini">
                    <el-form-item  label="部门编号" :label-width="formLabelWidth">
                        <el-input  v-model="department.no"  autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="部门名称" :label-width="formLabelWidth">
                        <el-input v-model="department.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item  label="部门经理" :label-width="formLabelWidth">
                        <el-input  v-model="department.manager" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" :label-width="formLabelWidth">
                        <el-input v-model="department.phone" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="固定电话" :label-width="formLabelWidth">
                        <el-input v-model="department.tel" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" :label-width="formLabelWidth">
                        <el-input v-model="department.email" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="部门职位" :label-width="formLabelWidth">
                        <el-select v-model="department.id" placeholder="请选择职位" :label-width="formLabelWidth">
                            <el-option v-for="post in department.posts" :label="post.name" :value="post.did">
                            </el-option>
                        </el-select>
                        <el-button type="primary" icon="el-icon-plus" @click="aaa = true"></el-button>
                    </el-form-item>
                    <el-form-item label="部门简介" :label-width="formLabelWidth">
                        <el-input v-model="department.intro" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-button @click="cancelCategories()">取消</el-button>
                    <el-button type="primary" @click="updateDepartment()">保存</el-button>
                </el-form>
            </el-main>
        </el-container>
    </el-container>
    <el-dialog title="增加职位" :visible.sync="aaa">
        <el-form :model="post">
            <el-form-item label="部门职位" :label-width="formLabelWidth">
                <el-input v-model="post.cc"></el-input>
            </el-form-item>
            <el-button @click="aaa = false">取 消</el-button>
            <el-button type="primary" @click="addPost()">确 定</el-button>
        </el-form>
    </el-dialog>
    <el-dialog title="部门管理" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="部门编号" :label-width="formLabelWidth">
                <el-input v-model="form.no"></el-input>
            </el-form-item>
            <el-form-item label="部门名称" :label-width="formLabelWidth">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="部门经理" :label-width="formLabelWidth">
                <el-input v-model="form.manager"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" :label-width="formLabelWidth">
                <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="固定电话" :label-width="formLabelWidth">
                <el-input v-model="form.tel"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth">
                <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item label="部门职位" :label-width="formLabelWidth">
                <el-input v-model="form.pname"></el-input>
            </el-form-item>
            <el-form-item label="部门简介" :label-width="formLabelWidth">
                <el-input v-model="form.intro"></el-input>
            </el-form-item>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveDepartement()">确 定</el-button>
        </el-form>
    </el-dialog>
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:"#app",
        data() {
            return {
                dialogFormVisible: false,
                aaa:false,
                //设置departments权限接收挂载获得的数据
                departments:null,
                formLabelWidth: '150px',
                form: {
                    pid:'',
                    id:'',
                    no:'',
                    name:'',
                    manager:'',
                    phone:'',
                    tel:'',
                    email:'',
                    pname:'',
                    intro:''
                },
                post:{
                  cc:'',
                },
                department:{
                    pid:'',
                    id:'',
                    no:'',
                    name:'',
                    manager:'',
                    phone:'',
                    tel:'',
                    email:'',
                    pname:'',
                    intro:'',
                    posts:null,
                    cc: null,
                },
            }

        },
        methods: {
            functionAllDepartment(){
                axios.get("/departments").then(value => {
                    if (value.data.code==1){
                        this.departments=value.data.data;
                    }
                })
            },
            functionEdit(id) {
                this.id=id;
                axios.get("/departments/"+id).then(value => {
                    if (value.data.code == 1) {
                        this.department = value.data.data;
                        this.form.pid=this.department.pid;
                        this.aa=true;
                    }
                })
            },
            addPost(){
                axios.post("/posts/"+this.department.id+"/"+this.post.cc).then(value => {
                    if (value.data.code == 1) {
                        this.functionEdit(this.department.id);
                        this.aaa=false;
                    }
                })
            },
            saveDepartement() {
                axios.post("/department",this.form).then(value => {
                  if (value.data.code==1){
                      this.functionAllDepartment();
                      this.dialogFormVisible=false;
                  }
                })
            },
            updateDepartment(){
                axios.put("/department",this.department).then(value => {
                    if (value.data.code == 1){
                        this.functionAllDepartment();
                        location.href.reload();
                        this.$message(value.data.msg);
                    }
                })
            },
            deleteCategories() {
                if (confirm("确定要删除吗?")) {
                    axios.delete("/department/" + this.department.id).then(value => {
                        if (value.data.code == 1) {
                            axios.get("/departments").then(value => {
                                if (value.data.code == 1) {
                                    this.departments = value.data.data;
                                }
                            })
                        }
                    })
                }
            }
        }, mounted(){
            //通过axios的get请求权限获得数据，判断数据是否存在，存在则复制给当前页面的functions
            this.functionAllDepartment();
        }
    });
</script>
</body>
</html>